<!DOCTYPE html>

<html lang="zh-CN">

<head>
  
  <title>Hexo博客的本地搭建 - 完全小白</title>
  <meta charset="UTF-8">
  <meta name="description" content="分享前端知识，持续学习，持续成长！！！">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=5">
  
  

  <link rel="shortcut icon" href="https://whbbit-picture.oss-cn-beijing.aliyuncs.com/505735.png" type="image/png" />
  <meta name="description" content="在昨天下决心要重新建站后，今天一早我就跑到了电脑前来搞这些东西。">
<meta property="og:type" content="article">
<meta property="og:title" content="Hexo博客的本地搭建">
<meta property="og:url" content="https://lostmobbit.gitee.io/2020/08/26/202008271218/index.html">
<meta property="og:site_name" content="完全小白">
<meta property="og:description" content="在昨天下决心要重新建站后，今天一早我就跑到了电脑前来搞这些东西。">
<meta property="og:locale" content="zh_CN">
<meta property="og:image" content="https://whbbit-picture.oss-cn-beijing.aliyuncs.com/%E6%89%B9%E6%B3%A8%202020-08-26%20094222.png">
<meta property="og:image" content="https://whbbit-picture.oss-cn-beijing.aliyuncs.com/%E6%89%B9%E6%B3%A8%202020-08-26%20091305.png">
<meta property="og:image" content="https://whbbit-picture.oss-cn-beijing.aliyuncs.com/%E6%89%B9%E6%B3%A8%202020-08-26%20095235.png">
<meta property="og:image" content="https://whbbit-picture.oss-cn-beijing.aliyuncs.com/%E6%89%B9%E6%B3%A8%202020-08-26%20095726.png">
<meta property="og:image" content="https://whbbit-picture.oss-cn-beijing.aliyuncs.com/%E6%89%B9%E6%B3%A8%202020-08-26%20095814.png">
<meta property="article:published_time" content="2020-08-25T16:00:00.000Z">
<meta property="article:modified_time" content="2020-09-03T10:07:36.903Z">
<meta property="article:author" content="Whbbit">
<meta property="article:tag" content="博客">
<meta property="article:tag" content="Hexo">
<meta name="twitter:card" content="summary">
<meta name="twitter:image" content="https://whbbit-picture.oss-cn-beijing.aliyuncs.com/%E6%89%B9%E6%B3%A8%202020-08-26%20094222.png">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/combine/gh/nexmoe/nexmoe.github.io@latest/css/style.css,npm/highlight.js@9.15.8/styles/atom-one-dark.css,gh/nexmoe/nexmoe.github.io@latest/lib/mdui_043tiny/css/mdui.css,gh/nexmoe/nexmoe.github.io@latest/lib/iconfont/iconfont.css" crossorigin>
  
  <!--<link rel="stylesheet" href="/css/style.css?v=1599276187641">-->

  
<meta name="generator" content="Hexo 5.1.1"></head>

<body class="mdui-drawer-body-left">
  
  <div id="nexmoe-background">
    <div class="nexmoe-bg" style="background-image: url(https://cdn.jsdelivr.net/gh/nexmoe/nexmoe.github.io@latest/images/cover/5c3aec85a4343.jpg)"></div>
    <div class="mdui-appbar mdui-shadow-0">
      <div class="mdui-toolbar">
        <a mdui-drawer="{target: '#drawer', swipe: true}" title="menu" class="mdui-btn mdui-btn-icon mdui-ripple"><i class="mdui-icon nexmoefont icon-menu"></i></a>
        <div class="mdui-toolbar-spacer"></div>
        <!--<a href="javascript:;" class="mdui-btn mdui-btn-icon"><i class="mdui-icon material-icons">search</i></a>-->
        <a href="/" title="Whbbit" class="mdui-btn mdui-btn-icon"><img src="https://whbbit-picture.oss-cn-beijing.aliyuncs.com/avatar.jpg" alt="Whbbit"></a>
       </div>
    </div>
  </div>
  <div id="nexmoe-header">
      <div class="nexmoe-drawer mdui-drawer" id="drawer">
    <div class="nexmoe-avatar mdui-ripple">
        <a href="/" title="Whbbit">
            <img src="https://whbbit-picture.oss-cn-beijing.aliyuncs.com/avatar.jpg" alt="Whbbit" alt="Whbbit">
        </a>
    </div>
    <div class="nexmoe-count">
        <div><span>文章</span>4</div>
        <div><span>标签</span>4</div>
        <div><span>分类</span>2</div>
    </div>
    <div class="nexmoe-list mdui-list" mdui-collapse="{accordion: true}">
        
        <a class="nexmoe-list-item mdui-list-item mdui-ripple" href="/" title="回到首页">
            <i class="mdui-list-item-icon nexmoefont icon-home"></i>
            <div class="mdui-list-item-content">
                回到首页
            </div>
        </a>
        
        <a class="nexmoe-list-item mdui-list-item mdui-ripple" href="/archives" title="文章归档">
            <i class="mdui-list-item-icon nexmoefont icon-container"></i>
            <div class="mdui-list-item-content">
                文章归档
            </div>
        </a>
        
        <a class="nexmoe-list-item mdui-list-item mdui-ripple" href="/about.html" title="关于博客">
            <i class="mdui-list-item-icon nexmoefont icon-info-circle"></i>
            <div class="mdui-list-item-content">
                关于博客
            </div>
        </a>
        
        <a class="nexmoe-list-item mdui-list-item mdui-ripple" href="/Py/Py.html" title="我的朋友">
            <i class="mdui-list-item-icon nexmoefont icon-unorderedlist"></i>
            <div class="mdui-list-item-content">
                我的朋友
            </div>
        </a>
        
        <a class="nexmoe-list-item mdui-list-item mdui-ripple" href="/sponsor/sponsor.html" title="阔落奶茶">
            <i class="mdui-list-item-icon nexmoefont icon-coffee"></i>
            <div class="mdui-list-item-content">
                阔落奶茶
            </div>
        </a>
        
    </div>
    <aside id="nexmoe-sidebar">
  
  <div class="nexmoe-widget-wrap">
    <h3 class="nexmoe-widget-title">社交按钮</h3>
    <div class="nexmoe-widget nexmoe-social">
        <a class="mdui-ripple" href="https://space.bilibili.com/104376935" target="_blank" mdui-tooltip="{content: '哔哩哔哩'}" style="color: rgb(231, 106, 141);background-color: rgba(231, 106, 141, .15);">
            <i class="nexmoefont icon-bilibili"></i>
        </a><a class="mdui-ripple" href="https://github.com/Whbbit1999" target="_blank" mdui-tooltip="{content: 'GitHub'}" style="color: rgb(25, 23, 23);background-color: rgba(25, 23, 23, .15);">
            <i class="nexmoefont icon-github"></i>
        </a>
    </div>
</div>
  
  
  <div class="nexmoe-widget-wrap">
    <h3 class="nexmoe-widget-title">文章分类</h3>
    <div class="nexmoe-widget">

      <ul class="category-list">

        


        

        

        <li class="category-list-item">
          <a class="category-list-link" href="/categories/随笔/Hexo博客搭建/">Hexo博客搭建</a>
          <span class="category-list-count">2</span>
        </li>

        

        <li class="category-list-item">
          <a class="category-list-link" href="/categories/随笔/">随笔</a>
          <span class="category-list-count">4</span>
        </li>

        
      </ul>

    </div>
  </div>


  
  
  <div class="nexmoe-widget-wrap">
    <h3 class="nexmoe-widget-title">标签云</h3>
    <div id="randomtagcloud" class="nexmoe-widget tagcloud nexmoe-rainbow">
      <a href="/tags/Hexo/" style="font-size: 20px;">Hexo</a> <a href="/tags/%E5%8D%9A%E5%AE%A2/" style="font-size: 20px;">博客</a> <a href="/tags/%E5%A4%B1%E8%B4%A5%E8%AE%B0%E5%BD%95/" style="font-size: 10px;">失败记录</a> <a href="/tags/%E9%9A%8F%E7%AC%94/" style="font-size: 10px;">随笔</a>
    </div>
    
  </div>

  
</aside>
    <div class="nexmoe-copyright">
        &copy; 2020 Whbbit
        Powered by <a href="http://hexo.io/" target="_blank">Hexo</a>
        & <a href="https://nexmoe.com/hexo-theme-nexmoe.html" target="_blank">Nexmoe</a>
    </div>
</div><!-- .nexmoe-drawer -->
  </div>
  <div id="nexmoe-content">
    <div class="nexmoe-primary">
        <div class="nexmoe-post">
  
      <div class="nexmoe-post-cover" style="padding-bottom: 62.5%;"> 
          <img data-src="https://whbbit-picture.oss-cn-beijing.aliyuncs.com/devana-jalalludin-XhamszWLiD4-unsplash.jpg" data-sizes="auto" alt="Hexo博客的本地搭建" class="lazyload">
          <h1>Hexo博客的本地搭建</h1>
      </div>
  
  
  <div class="nexmoe-post-meta nexmoe-rainbow" style="margin:10px 0!important;">
    <a><i class="nexmoefont icon-calendar-fill"></i>2020年08月26日</a>
    <a><i class="nexmoefont icon-areachart"></i>813 字</a>
    <a><i class="nexmoefont icon-time-circle-fill"></i>大概 3 分钟</a>
</div>

  <div class="nexmoe-post-right">
    
      <div class="nexmoe-fixed">
        <div class="nexmoe-valign">
            <div class="nexmoe-toc">
                <ol class="toc"><li class="toc-item toc-level-2"><a class="toc-link" href="#%E9%87%8D%E6%96%B0%E5%BB%BA%E7%AB%99%E7%9A%84%E5%8E%9F%E5%9B%A0"><span class="toc-number">1.</span> <span class="toc-text">重新建站的原因</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%89%8D%E6%88%8F"><span class="toc-number">2.</span> <span class="toc-text">前戏</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E9%87%8D%E5%A4%B4%E6%88%8F%E5%BC%80%E5%B9%95"><span class="toc-number">3.</span> <span class="toc-text">重头戏开幕</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E8%AF%95%E8%AF%95%E6%95%88%E6%9E%9C"><span class="toc-number">4.</span> <span class="toc-text">试试效果</span></a></li></ol>
            </div>
        </div>
      </div>
    
  </div>

  <article>
    <p>在昨天下决心要重新建站后，今天一早我就跑到了电脑前来搞这些东西。</p>
<a id="more"></a>

<h2 id="重新建站的原因"><a href="#重新建站的原因" class="headerlink" title="重新建站的原因"></a>重新建站的原因</h2><blockquote>
<p>在昨天下决心要重新建站后，今天一早我就跑到了电脑前来搞这些东西。</p>
</blockquote>
<p>其实我对于 hexo 已经不算陌生了。从 19 年大概是过年那一阵子接触到现在已经有一年之久了，我也用其搭建了好几个已经夭折的个人网站，都是托管到 GitHub 上。这回我也依然托管到 GitHub 上，并且我要将这个过程都记录下来。以便自己以后的学习参考，可能也会帮助到一些需要建站的人吧。</p>
<h2 id="前戏"><a href="#前戏" class="headerlink" title="前戏"></a>前戏</h2><blockquote>
<p>做什么事都需要准备准备，何况是现在这个信息爆炸的时代呢？<del>所谓假戏真做</del>%?…,# *‘☆&amp;℃$︿★?</p>
</blockquote>
<p>我们要准备的工具有：</p>
<ul>
<li>git</li>
<li>node（最好是在 12 版本以上，越新越好）<code>我们这回主要用到的是Node安装好后自带的npm包管理器</code></li>
</ul>
<p>具体安装地址如下：</p>
<p>git 官网：<a target="_blank" rel="noopener" href="https://git-scm.com/">https://git-scm.com/</a></p>
<p>Node 官网：<a target="_blank" rel="noopener" href="https://nodejs.org/en/">https://nodejs.org/en/</a></p>
<blockquote>
<p>下载是一个人的基本功，这个不需要在多说了吧。🤭</p>
</blockquote>
<h2 id="重头戏开幕"><a href="#重头戏开幕" class="headerlink" title="重头戏开幕"></a>重头戏开幕</h2><p>下载好之后，使用 <code>node -v </code> 和 <code>git --version </code> 来确定你是否安装好了 Node 和 git 的环境，也可以顺便使用<code>npm -v</code>来看一下 npm 包管理器的版本。这两个是我们学习前端不可或缺的东西，早早下载好也是不错的选择。</p>
<p>运行结果大概如下图所示：</p>
<p><img data-sizes="auto" data-src="https://whbbit-picture.oss-cn-beijing.aliyuncs.com/%E6%89%B9%E6%B3%A8%202020-08-26%20094222.png" alt="运行结果" class="lazyload"><br>这样，我们就可以进行今天的主角 Hexo 登场了。</p>
<p>下载 Hexo 我们使用全局安装，这样不仅简便一些而且可以在你电脑的任何地方新建 Hexo 博客。</p>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">npm install -g hexo-cli</span><br></pre></td></tr></table></figure>

<p>这是一个比较漫长的过程，耐心等待即可。如果你遇到和我下面一样的问题，在文件结构和官网给出的一样时。可以试着中断它。</p>
<p>我这里运行结果如下（中途卡死不动了，但是我看了一下文件夹中的文件，和 Hexo 官网给出的文件目录是一样的，所以我就强行终止了它，不过在后面来看，这个举动并没有对后面产生致命的影响。）：</p>
<p><img data-sizes="auto" data-src="https://whbbit-picture.oss-cn-beijing.aliyuncs.com/%E6%89%B9%E6%B3%A8%202020-08-26%20091305.png" alt="初始化hexo" class="lazyload"></p>
<p>而后可以使用<code>npm install</code>来下载所需要的依赖，这个又是比较漫长的过程，需耐心等待。运行完成结果如下：</p>
<p><img data-sizes="auto" data-src="https://whbbit-picture.oss-cn-beijing.aliyuncs.com/%E6%89%B9%E6%B3%A8%202020-08-26%20095235.png" alt="安装依赖" class="lazyload"></p>
<h2 id="试试效果"><a href="#试试效果" class="headerlink" title="试试效果"></a>试试效果</h2><p>这时，你就可以享受一下站在巨人肩上的快感了。</p>
<p>运行<code>hexo g</code>，让其编译成静态文件。</p>
<p><img data-sizes="auto" data-src="https://whbbit-picture.oss-cn-beijing.aliyuncs.com/%E6%89%B9%E6%B3%A8%202020-08-26%20095726.png" alt="编译" class="lazyload"></p>
<p>运行<code>hexo s</code>，可以在本地看一下今天半个多小时所做的成果了。</p>
<p><img data-sizes="auto" data-src="https://whbbit-picture.oss-cn-beijing.aliyuncs.com/%E6%89%B9%E6%B3%A8%202020-08-26%20095814.png" alt="本地运行" class="lazyload"></p>
<p>在浏览器地址栏中输入上面所显示的地址，我这里是<code>http://localhost:4000</code>，你就可以看到自己本地的网站了！！！</p>
<blockquote>
<p>请欣赏一下自己劳动的成果，奖励自己一句鼓励的话：‘’嘿，宝贝。你今天真棒！！“</p>
</blockquote>
<p>哦，对了。别忘了收拾战场，使用 CTRL+C 结束它。这样，我们就可以开始下一步了······</p>
<blockquote>
<p>文章参考：<br>hexo 官网: <a target="_blank" rel="noopener" href="https://hexo.io/zh-cn/docs/">https://hexo.io/zh-cn/docs/</a><br>Nexmoe 文档： <a target="_blank" rel="noopener" href="https://docs.nexmoe.com/">https://docs.nexmoe.com/</a></p>
</blockquote>

  </article>

  <div class="nexmoe-post-meta nexmoe-rainbow">
    
        <a class="nexmoefont icon-appstore-fill -link" href="/categories/%E9%9A%8F%E7%AC%94/">随笔</a><a class="nexmoefont icon-appstore-fill -link" href="/categories/%E9%9A%8F%E7%AC%94/Hexo%E5%8D%9A%E5%AE%A2%E6%90%AD%E5%BB%BA/">Hexo博客搭建</a>
    
    
        <a class="nexmoefont icon-tag-fill -none-link" href="/tags/Hexo/" rel="tag">Hexo</a> <a class="nexmoefont icon-tag-fill -none-link" href="/tags/%E5%8D%9A%E5%AE%A2/" rel="tag">博客</a>
    
</div>

  <div class="nexmoe-post-footer">
    
      
  <div class="nexmoe-post-copyright">
    <strong>本文作者：</strong>Whbbit<br>
    <strong>本文链接：</strong><a href="https://lostmobbit.gitee.io/2020/08/26/202008271218/" title="https:&#x2F;&#x2F;lostmobbit.gitee.io&#x2F;2020&#x2F;08&#x2F;26&#x2F;202008271218&#x2F;" target="_blank" rel="noopener">https:&#x2F;&#x2F;lostmobbit.gitee.io&#x2F;2020&#x2F;08&#x2F;26&#x2F;202008271218&#x2F;</a><br>
    
      <strong>版权声明：</strong>本文采用 <a href="https://creativecommons.org/licenses/by-nc-sa/3.0/cn/deed.zh" target="_blank">CC BY-NC-SA 3.0 CN</a> 协议进行许可
    
  </div>


    
    <section class="nexmoe-comment">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/gitalk@1.5.0/dist/gitalk.min.css">
<div id="gitalk"></div>
<script src="https://cdn.jsdelivr.net/npm/gitalk@1.5.0/dist/gitalk.min.js"></script>
<script type="text/javascript">
    var gitalk = new Gitalk({
        clientID: '80b2453b6d5f37ad6225',
        clientSecret: '43e99fa852795c9a7b3eb924b2558c64b84bbdeb',
        id: window.location.pathname,
        repo: 'nexmoe.github.io',
        owner: 'nexmoe',
        admin: 'nexmoe'
    })
    gitalk.render('gitalk')
</script>
</section>
  </div>
</div>
    </div>
  </div>
  <script src="https://cdn.jsdelivr.net/combine/npm/lazysizes@5.1.0/lazysizes.min.js,gh/highlightjs/cdn-release@9.15.8/build/highlight.min.js,npm/mdui@0.4.3/dist/js/mdui.min.js,gh/nexmoe/nexmoe.github.io@latest/js/app.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
<!--<script src="/js/app.js?v=1599276187642"></script>-->


    <script src="https://cdn.jsdelivr.net/gh/xtaodada/xtaodada.github.io@0.0.2/copy.js"></script>



  





</body>

</html>
